'use client';

import { useState } from 'react';

// ShadCn
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';

// Components
import ImportJsonButton from '../../invoice/form/sections/ImportJsonButton';
import { SavedInvoicesList } from './components/SavedInvoicesList';

// Context
import { useInvoiceContext } from '@/context/InvoiceContext';

type InvoiceLoaderModalType = {
    children: React.ReactNode;
};

export const InvoiceLoaderModal = ({ children }: InvoiceLoaderModalType) => {
    const [open, setOpen] = useState(false);

    const { savedInvoices } = useInvoiceContext();

    return (
        // @ts-ignore
        <Dialog open={open} onOpenChange={setOpen}>
            {/* @ts-ignore */}
            <DialogTrigger asChild>{children}</DialogTrigger>
            {/* @ts-ignore */}
            <DialogContent>
                <DialogHeader className="pb-2 border-b">
                    {/* @ts-ignore */}
                    <DialogTitle>Saved Invoices</DialogTitle>
                    {/* @ts-ignore */}
                    <DialogDescription>
                        <div className="space-y-2">
                            <p>You have {savedInvoices.length} saved invoices</p>
                            <ImportJsonButton setOpen={setOpen} />
                        </div>
                    </DialogDescription>
                </DialogHeader>

                <SavedInvoicesList setModalState={setOpen} />
            </DialogContent>
        </Dialog>
    );
};
